<template>
  <!-- 地图容器 -->
  <!-- <div ref="mapContainer" class="map-container"></div> -->
  <view class="content">
    <view>
      <BaiduMap
        v-if="currentPosition.value"
        :currentPosition="currentPosition"
        @update-value="handleUpdateValue"
      />
    </view>
    <view class="card">
      <uni-card>
        <div>
          <view class="text">
            <p class="b z">{{ gpsName }}</p>
            <!-- <uni-tag text="静止" :custom-style="{ backgroundColor: bgColor, color: '#fff' }">
            </uni-tag> -->
            <!-- <span class="z">12小时47分</span> -->
            <view class="horizontal-line"></view>
            <div>
              <p v-for="(item, index) in carList" :key="index">
                <span>{{ item.label }}</span>
                {{ item.key }}
              </p>
              <p>
                <span>总里程数</span>
                {{ statisticsNum }}
              </p>
              <p>
                <span>地址</span>
                {{ childValue }}
              </p>
            </div>
            <view class="horizontal-line"></view>
            <div class="flex">
              <p>追踪</p>
              <p @click="startPlay">回放</p>
              <p>指令</p>
              <p @click="navigateToDetail">信息</p>
            </div>
          </view>
        </div>
      </uni-card>
    </view>
  </view>
  <!-- 自定义底部栏 -->
  <CustomTabBar />
</template>

<script setup>
import { ref, onMounted, reactive, onBeforeUnmount } from 'vue'
import { onShow, onLoad } from '@dcloudio/uni-app'

import BaiduMap from '../../components/BaiduMap.vue'
import CustomTabBar from '@/components/CustomTabBar.vue'
import { devicLocation,MileageStatistics } from '@/services/index'
import { useTabParamsStore } from '@/stores/modules/shebei'
const mapMaxHeight = ref( 'calc(100vh - 90px)' )

const tabParamsStore = useTabParamsStore()
const id = ref('')
const childValue = ref('') // 存储子组件的值
const statisticsNum  = ref('')
const gpsName = ref('')
// 通讯时间
const dataTime = ref('')
// 监听子组件的事件，更新 childValue
const handleUpdateValue = (value) => {
  childValue.value = value
  console.log('子组件的值:', value)
}

// 车辆信息
const carList = reactive([
  {
    label: '通讯时间',
    value: 'dataTime',
    key:''
  },
  {
    label: '定位方式',
    value: '',
    key:'4G-gps'
  },
])
const currentPosition = reactive([])
const navigateToDetail = () => {
  // 动态设置导航栏标题
  // uni.setNavigationBarTitle({
  //   title: '陈威靖吉利有线粤TG3K25',
  // })
  uni.navigateTo({
    url: '/pages/detail/detail?name=陈威靖吉利有线粤TG3K25', // 目标页面路径
  })
}
// 拿值
onShow(() => {
  if (tabParamsStore.params) {
    // 使用参数
    id.value = tabParamsStore.params.imei
    console.log('接收到的参数:', tabParamsStore.params)
    
    getData()
    getStatistics()
    // 清空参数（避免重复使用）
    // tabParamsStore.clearParams()
  }
})

const getData = async () => {
  const res = await devicLocation(id.value)
  currentPosition.value = [res.data.longitude, res.data.latitude]
  console.log( currentPosition.value, '11111')
  gpsName.value = res.data.gpsname
  carList.map(item=>{
    if(item.label=='通讯时间'){
      item.key = res.data[item.value]
    }
  })
  dataTime.value = res.data.dataTime
}
// 里程数统计
const getStatistics = async () => {
  const res = await MileageStatistics(id.value)
  statisticsNum.value = res.data
  console.log(res);
  
}
onBeforeUnmount(() => {})
const startPlay = () => {
  // 动态设置导航栏标题——
  // uni.setNavigationBarTitle({
  //   title: '陈威靖吉利有线粤TG3K25',
  // })
  uni.navigateTo({
    url: '/pages/playback1/playback?id=' + id.value, // 目标页面路径
  })
 
}
</script>

<style scoped>
/* 确保页面内容不被底部栏遮挡 */
.content {
  padding-bottom: 60px; /* 根据实际高度调整 */
}
.card {
  position: absolute;
  bottom: 0;
  /* 距离底部的距离，等于 tabBar 的高度 */
  z-index: 9999;
  font-size: 12px;
  width: 100%;
  /* height: 100px; */
}
.z {
  font-size: 14px;
}
.b {
  font-weight: bold;
}
.container {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  height: 100vh;
  position: relative;
}
.text {
  font-size: 13px;
  color: black;
}
.horizontal-line {
  margin-top: 5px;
  width: 100%; /* 或者具体的宽度 */
  height: 1px; /* 线的厚度 */
  background-color: #ebeef5; /* 线的颜色 */
}
.flex {
  display: flex;
  justify-content: space-around;
  align-items: flex-end;
  height: 30px;
  color: #4e6bb6;
}
</style>
